<template>
  <div class="login-body">
    <div class="bg-image"></div>
    <div class="login-container">
      <div class="head">
        <div class="name">
          <div class="title">{{ state.site.title }}</div>
          <div class="tips">—————— 后台管理系统 ——————</div>
        </div>
      </div>
      <el-form class="login-form" label-position="top"
        :rules="state.rules"
        :model="state.ruleForm"
        ref="refLoginForm">
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model.trim="state.ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model.trim="state.ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="state.site.is_vertify === 1" label="验证码" prop="captcha">
          <el-input class="input-captcha" v-model.trim="state.ruleForm.captcha" autocomplete="off"
            :style="{
              fontSize: '16px'
            }"/>
          <img class="login-captcha" :src="state.site.captcha" alt="验证码" @click="refreshCaptcha">
        </el-form-item>
        <el-form-item style="margin-top: 40px;">
          <el-button style="width: 100%; height: 36px;" type="primary" @click="submitForm">立即登录</el-button>
          <el-button
            @click="to"
            style="margin-top: 16px; margin-left: 0; background-color: var(--el-color-info-light-9); width: 100%;">
            登录商户端
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { AdminLoginCaptcha, AdminLoginPost, AdminSettingsInfo } from "../api/server/login";
import { local } from "../utils/storage";
import { ElMessage } from "element-plus";


const refLoginForm = ref(null)
const containerHeight = ref(500);
const titlePaddingTop = ref(50);
const state = reactive({
  site: { is_vertify: 0, captcha: '' },
  ruleForm: { username: 'admin', password: '123456', captcha: '' },
  rules: {
    username: [
      { required: 'true', message: '账户不能为空', trigger: 'blur' }
    ],
    password: [
      { required: 'true', message: '密码不能为空', trigger: 'blur' }
    ],
    captcha: [
      { required: 'true', message: '请输入验证码', trigger: 'blur' }
    ]
  }
})

onMounted(() => {
  loadSettings()
})

const loadSettings = () => {
  AdminSettingsInfo().then((e) => {
    state.site = e.data
    state.site.is_vertify = +e.data.is_vertify
    local.set('ADMIN.SITE', e.data)
    setContainerHeight(+e.data.is_vertify)
  })
}

const refreshCaptcha = () => {
  AdminLoginCaptcha().then(e => {
    state.site.captcha = e.data
  })
}

/**
 * 设置需要验证时，表单容器的高度
 * @param isNeed 是否开启：0|1
 */
const setContainerHeight = (isNeed) => {
  if (isNeed) {
    containerHeight.value = 540
    titlePaddingTop.value = 40
  }
}

const submitForm = () => {
  refLoginForm.value.validate((valid) => {
    if (valid) {
      AdminLoginPost(state.ruleForm).then(({ data: { info, token } }) => {
        local.set('ADMIN.TOKEN', token || '')
        local.set('ADMIN.USERINFO', info || {})
        window.location.href = '/admin/'
      }).catch(({ code, msg }) => {
        if (code === 500) {
          ElMessage.error(msg)
          // 验证码验证失败后，要清空验证码并且刷新验证码图片
          state.ruleForm.captcha = ''
          refreshCaptcha()
        }
      })
    }
    return false
  })
}

const to = () => {
  window.location.href = '/'
}
</script>

<style scoped>
.login-body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  background: #3aa693;
  background: -webkit-linear-gradient(180deg, #077f7c, #3aa693, #5ecfaa, #7ffac2);
  background: linear-gradient(180deg, #077f7c, #3aa693, #5ecfaa, #7ffac2);

}

.login-container {
  width: 420px;
  height: v-bind(containerHeight+ 'px');
  box-shadow: 0 21px 41px 0 rgba(0, 0, 0, 0.2);

  background: #5ecfaa; /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #1c9b98, #3aa693, #5ecfaa, #7ffac2); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #1c9b98, #3aa693, #5ecfaa, #7ffac2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.login-container .footer {
  text-align: center;
}

.login-container .footer .a-link {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: v-bind(titlePaddingTop+ 'px') 0 v-bind(titlePaddingTop+ 'px');
}

.head img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.head .name {
  text-align: center;
}

.head .title {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

.head .tips {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

.login-form {
  width: 70%;
  margin: 0 auto;
}

.input-captcha {
  width: calc(100% - 155px);
  margin-right: 20px;
}

.login-captcha {
  border-radius: 3px;
  cursor: pointer;
}

.login-captcha:hover {
  opacity: .6;
  transition: all 0.5s ease;
}
</style>
<style>
.login-container .login-form .el-form-item__label {
  color: #fff;
}

.login-container .login-form .el-checkbox__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.el-form--label-top .el-form-item__label {
  padding: 0;
}

.login-form .el-form-item {
  margin-bottom: 12px;
}
</style>
